<template>
  <div>
    <div class="loginForm">
      <div class="phoneForm">
        <div class="inputList">


          <input type="text" placeholder="请输入账号" maxlength="11" v-model="name" />

          <i class="empty" style="display: none;"></i>
        </div>
        <div class="inputList">
          <input type="password" placeholder="请输入密码" maxlength="11" v-model="psw" />
          <i class="empty" style="display: none;"></i>
        </div>
        <div class="inputList code">
          <input type="text" placeholder="请输入验证码" maxlength="6" v-model="code" />
          <i class="empty" style="display: none;"></i>
          <div class="hu" @click="changeimg">
            <img :src="imgurl" alt />
          </div>

        </div>
      </div>

    </div>
    <button :class="(psw && name && code) ? 'loginBtnYes':'loginBtnNo'" @click="login">登录</button>
  </div>
</template>

<script>
import getdata from "@/api/userget.js";
import { setToken, setUser } from "@/utils/token.js";
export default {
  data() {
    return {
      imgurl: "https://www.defihome.xyz/api/user/code",
      name: "",
      psw: "",
      code: "",
    };
  },

  components: {},

  methods: {
    changeimg() {
      this.imgurl = "https://www.defihome.xyz/api/user/code/?" + new Date();
    },
    async login() {
      if (this.name && this.psw && this.code) {
        try {
          let str = "user/login";
          let body = {
            name: this.name,
            password: this.psw,
            code: this.code,
          };
          let n = await getdata.getuser(str, body);
          if (n.data.flag) {
            this.$notify({ type: "success", message: n.data.message });
            //保存token
            setToken(n.data.data.token);
            //保存用户名名
            setUser(this.name);
            //保存到vuex
            this.$store.dispatch("username");
            //跳转
            this.$router.push({ path: "/my" });
          } else {
            this.$notify({ type: "danger", message: n.data.message });
          }
        } catch (err) {
          console.log(err);
        }
      } else {
        this.$notify({ type: "danger", message: "请输入用户名密码和验证码！" });
      }
    },
  },
};
</script>

<style lang="scss">
.loginForm {
  padding: 0.39rem 0.86rem;
  .inputList {
    position: relative;
    padding: 1.754981rem 1.00015rem;
    border-bottom: 1px solid #e6e6e6;

    input {
      display: block;
      border: none;
      outline: none;
      -webkit-appearance: none;
    }
    .hu {
      position: absolute;
      bottom: 1.8rem;
      right: 1.75rem;
      font-size: 0.811444rem;
      color: #999;
    }
  }
  .hint {
    margin-top: 0.754831rem;
    padding-left: 5%;
    font-size: 0.754831rem;
    color: #666;
  }
}

.loginBtnNo {
  background: linear-gradient(90deg, #a2edc7, #8cddc3);
  color: #d5f4e7;
}
button {
  margin-top: 2.755131rem;
  width: 100%;
  line-height: 2.755131rem;
  font-size: 1.00015rem;
  border-radius: 0.24532rem;
  border: 0;
}

</style>